<template>
	<view>
		<nav-bar title="统计"></nav-bar>
		<scroll-view scroll-y :style="{ height: mainHeight }" class="content">
			<tab-index @tabClick="tabClick"></tab-index>
			<view class="box">
				<view class="title">
					<view class="text">我的客户</view>
					<view class="more" @click="handelClick('member')">
						<u-icon name="arrow-right" color="#666666" size="22"></u-icon>
					</view>
				</view>
				<view class="member">
					<view class="list" v-for="(item, index) in memberData" :key="index">
						<view class="number">{{ item.number }} <span class="people">人</span></view>
						<view class="member-text">{{ item.text }} </view>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="title">
					<view class="text">我的收益</view>
					<view class="more" @click="handelClick('earning')">
						<u-icon name="arrow-right" color="#666666" size="22"></u-icon>
					</view>
				</view>
				<view class="money">
					<view class="number">132312313 <span class="people">元</span></view>
				</view>
				<view class="money-box" v-for="(item, index) in moneyData" :key="index">
					<view class="left">{{ item.text }}</view>
					<view class="right">{{ item.money }}元</view>
				</view>
			</view>
			<view class="box">
				<view class="title">
					<view class="text">我的卡项收益</view>
					<view class="more" @click="handelClick('cardEarning')">
						<u-icon name="arrow-right" color="#666666" size="22"></u-icon>
					</view>
				</view>
				<view class="member" style="display: flex;justify-content: space-around;">
					<view class="list" v-for="(item, index) in cardData" :key="index">
						<view class="number">{{ item.number }} <span class="people">元</span></view>
						<view class="member-text">{{ item.text }} </view>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="title">
					<view class="text">我的评价</view>
				</view>
				<view class="comment">累计好卡还是觉得会尽快电话</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import NavBar from '@/components/nav-bar/index.vue'
import Technician from './components/technician.vue'
import tabIndex from '../../components/statis/tab-index.vue'
export default {
	components: { NavBar, Technician,tabIndex },
	data() {
		return {
			mainHeight: '',
			tabData: [
				{
					name: '当日'
				},
				{
					name: '昨日'
				},
				{
					name: '当月'
				},
				{
					name: '上月'
				}
			],
			activeName: '',
			activeIndex:0,
			memberData: [
				{
					number: 28,
					text: '服务客户'
				},
				{
					number: 11,
					text: '我的新课'
				},
				{
					number: 11,
					text: '回头客'
				},
				{
					number: 6,
					text: '复购客'
				}
			],
			moneyData: [
				{
					text: '项目收益',
					money: '21323312',
				},
				{
					text: '包间收益',
					money: '21323312',
				},
				{
					text: '商品收益',
					money: '21323312',
				}
			],
			cardData: [
				{
					number: 213.2111,
					text: '会员卡'
				},
				{
					number: 110.12323,
					text: '储值卡'
				}
			],
		}
	},
	onLoad: function () {
	},
	created() {
		this.mainHeight = this.$store.getters.heightData.mainHeight + 'px'
	},
	methods: {
		tabClick(item) {
		},
		handelClick(item) {
			uni.navigateTo({
				url:`/subPages/order/${item}`,
			})
		}

	}
}
</script>

<style lang="scss" scoped>
.content {
	padding: 28rpx;
}

.number {
	font-size: 46rpx;
	font-family: DIN, DIN;
	font-weight: bold;
	color: #000000;
}

.people {
	font-size: 29rpx;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	color: #000000;
}

.tab-list {
	display: flex;

	.tab {
		width: 110rpx;
		height: 60rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		color: #C27E15;
		line-height: 60rpx;
		border-radius: 14rpx;
		border: 2rpx solid #C27E15;
		margin-right: 16rpx;
		text-align: center;
	}

	.active-tab {
		background-color: #C27E15;
		color: #fff;
	}
}

.box {
	width: 100%;
	background: #FFFFFF;
	border-radius: 17rpx 17rpx 17rpx 17rpx;
	opacity: 1;
	padding: 24rpx 30rpx 24rpx 22rpx;
	margin-top: 28rpx;

	.title {
		display: flex;
		justify-content: space-between;

		.text {
			font-size: 40rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			color: #333333;
		}

		.more {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.member {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;

		.list {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.member-text {
				font-size: 30rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				color: #666666;
			}
		}
	}

	.money {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
	}

	.money-box {
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		font-weight: 400;
		color: rgba(128, 128, 128, 1);
		margin-top: 28rpx;
	}

	.comment {
		font-size: 34rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-top: 20rpx;
	}
}
</style>
